﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Tag Basic</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets,
                sheet = spread.sheets[0];
            
            // sheet tag
            sheet.tag("Sheet tag");
            // row tag
            sheet.setTag(3, -1, "Row 4 tag");
            sheet.getRow(5).tag("Row 6 tag");
            // column tag
            sheet.getColumns(4, 6).tag("Column E-G tag");
            // cell tag
            sheet.getCell(0, 0).tag("A1 tag");
            sheet.getCells(6, 0, 9, 2).tag("Cells tag (A7:C10)");

            $("#btnSetTag").click(function () {
                var tag = $("#txtTag").val();

                var selections = sheet.getSelections();
                if(!selections || selections.length === 0){
                    return;
                }

                sheet.isPaintSuspended(true);

                var length = selections.length;
                for (var i = 0; i < length; i++) {
                    var sel = selections[i],
                        rowIndex = sel.row,
                        colIndex = sel.col,
                        rowCount = sel.rowCount,
                        colCount = sel.colCount,
                        maxRow = rowIndex + rowCount,
                        maxColumn = colIndex + colCount,
                        r, c;

                    if (rowIndex === -1 && colIndex === -1) {
                        sheet.tag(tag);
                    } else if (rowIndex === -1) {
                        for (c = colIndex; c < maxColumn ; c++) {
                            sheet.setTag(-1, c, tag);
                        }
                    } else if (colIndex === -1) {
                        for (r = rowIndex; r < maxRow; r++) {
                            sheet.setTag(r, -1, tag);
                        }
                    } else {
                        for (r = rowIndex; r < maxRow; r++) {
                            for (c = colIndex; c < maxColumn; c++) {
                                sheet.setTag(r, c, tag);
                            }
                        }
                    }
                }

                sheet.isPaintSuspended(false);
            });

            $("#btnGetTag").click(function () {
                var selections = sheet.getSelections();
                if (!selections || selections.length === 0) {
                    return;
                }

                var sel = selections[0],
                    row = sel.row,
                    col = sel.col,
                    $tag = $("#txtTag");

                if (row === -1 && col === -1) {
                    $tag.val(sheet.tag());
                } else {
                    $tag.val(sheet.getTag(row, col));
                }
            });

            $("#btnClearTag").click(function () {
                var selections = sheet.getSelections();
                if (!selections || selections.length === 0) {
                    return;
                }

                sheet.isPaintSuspended(true);

                var length = selections.length;
                for (var i = 0; i < length; i++) {
                    var sel = selections[i],
                        row = sel.row,
                        col = sel.col;

                    if (row === -1 && col === -1) {
                        sheet.tag(null);
                    } else {
                        sheet.clear(row, col, sel.rowCount, sel.colCount, spreadNS.SheetArea.viewport, spreadNS.StorageType.Tag);
                    }
                }

                sheet.isPaintSuspended(false);
            });
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 420px; border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <label for="txtTag">Tag: </label>
                <input type="text" id="txtTag" style="width: 200px" />
                <input type="button" id="btnSetTag" value="Set tag" title="Set tag to selected item(s)" />
                <input type="button" id="btnGetTag" value="Get tag" title="Get tag of 1st selected item" />
                <input type="button" id="btnClearTag" value="Clear tag" title="Clear tag of selected items" />
            </div>

            <div class="option-row">
                <p style="background-color:lavender;padding: 4px;">
                    You can set, get or clear tag of selected items.
                    <br />
                    Tags are provided in this demo: sheet, Row 4, Row 6, Column E-G, A1, A7:C10.
                </p>
            </div>
        </div>
    </div>
</body>
</html>
